<!-- @format -->

<template>
  <!-- 子页面的头部导航栏-->
  <view class="order">
    <view class="header" :style="style">
      <view class="flexbox" :style="[{ height: customBarH + 'px' }]">
        <view
          class="content"
          :style="[{ top: customTop + 'px', left: customLeft + 'px' }]">
          <view
            class="back-home"
            :style="[
              { width: customWidth + 'px', height: customHeight + 'px' },
            ]">
            <uni-icons
              color="#000"
              type="back"
              size="25"
              @click="goBack"></uni-icons>
            <view class="line"> </view>
            <uni-icons
              color="#000"
              type="home"
              size="25"
              @click="goIndex"></uni-icons>
          </view>
        </view>
        <view
          class="text"
          :style="[
            { height: customBarH + 'px', 'padding-top': statusBarH + 'px' },
          ]">
          收藏馆
        </view>
        <image class="img-bc" src="/static/mine/myTopBgc.png"></image>

        <view class="collect">
          <view class="collectNum">
            <view class="badge">我的徽章</view>
            <view class="getBad"
              >已获得
              <text class="num"> {{ badgesNum }} </text>
              枚徽章</view
            >
            <view class="border"></view>
          </view>
          <view class="bdLine"></view>

          <view class="awards">
            <view class="newcomer">

              <image
			     @tap="btnSharing(1)"
                v-if="optionId == 2 && circleNum!=0"
                src="../../static/collection/backNewcomer.png"
                mode="scaleToFill" />
				<image
				  v-if="circleNum==0"
				  src="../../static/collection/backNewcomer.png"
				  mode="scaleToFill" />
				  
              <view class="collTitle">雪圈新人</view>
              <view class="worn" v-if="checked == 1 &&optionId==1">已佩戴</view>
              <view class="weared" v-if="checked == 2 &&optionId!=1">未佩戴</view>
            </view>
            <view class="newcomer">
				<image
				  v-if="oneOrderNum>0 &&checked==1 "
				  src="../../static/collection/backSharing.png"
				  mode="scaleToFill" />
				
				<image
				   @tap="btnSharing(2)"
				  v-if="oneOrderNum>0 &&checked==1 "
				  src="../../static/collection/backSharing.png"
				  mode="scaleToFill" />
              <image
                v-if="oneOrderNum==0"
                src="../../static/collection/backSharing.png"
                mode="scaleToFill" />

	
              <view class="collTitle">心愿分享</view>
              <view class="worn" v-if="checked == 1 &&optionId==2">已佩戴</view>
              <view class="weared" v-if="checked == 2 &&optionId!=2">未佩戴</view>
            </view>
            <view class="newcomer">
              <image
            
                src="../../static/collection/backExperts.png"
                mode="scaleToFill" />
              <view class="collTitle">滑雪达人</view>
              <view class="worn" v-if="status == 1">已佩戴</view>
              <view class="weared" v-if="status == 0">未佩戴</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="eject" v-if="disable">
      <image
        class="imgbac"
        src="../../static/collection/spotlight.png"
        mode="scaleToFill" />
      <view class="ejectTitle">解锁新徽章</view>
      <image
        v-if="optionId === 1"
        class="centImg"
        src="../../static/collection/newcomer.png"
        mode="scaleToFill" />
      <image
        v-if="optionId === 2"
        class="centImg"
        src="../../static/collection/sharing.png"
        mode="scaleToFill" />
      <image
        v-if="optionId === 3"
        class="centImg"
        src="../../static/collection/experts.png"
        mode="scaleToFill" />
      <view>
        <text class="leftWith"></text>
        <text class="with">心愿分享</text>
        <text class="rightWith"></text>
      </view>

      <view class="illustrate">
        <view class="illTitle">心愿章</view>
        <view>用户使用一单成生成行程单后点击分享</view>
        <view class="illFinal">或保存后获得</view>
      </view>
      <button class="wear" @tap="btnWear">点击佩戴</button>
      <button class="share" open-type="share" @click="share">点击分享</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    childTitle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      statusBarH: 20,
      customBarH: 70,
      contentH: 0,
      customWidth: 0, //自定义胶囊的宽度
      customHeight: 0, //自定义胶囊的高度
      customTop: 0, //自定义胶囊距离顶部的距离
      customLeft: 0, //自定义胶囊距离左侧的距离
      disable: false,
      userId: 0,
      status: 0,
	  phonenumber:0,
      order: 0,
      optionId: 0,
      num: 0,
      badgesNum: 0,
	  circleNum:0,
	  oneOrderNum:0,
	  checked:0
    }
  },
  computed: {
    style() {
      let _style = `height: ${this.customBarH}px;`
      return _style
    },
  },
  onLoad(e) {
	  console.log(e)
	  this.oneOrderNum=e.oneOrderNum
	  this.circleNum=e.circleNum
    this.userId = uni.getStorageSync('userId')
	this.phonenumber = uni.getStorageSync('phonenumber')
	this.optionId=uni.getStorageSync('optionId')
	this.checked=uni.getStorageSync('checked')
    this.getList()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goIndex() {
      uni.switchTab({
        url: '/pages/index/index',
      })
    },
    changeTab(index) {
      this.tabIndex = index
      console.log(1)
    },
    getList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.getBadgesNum,
        method: 'GET',
        data: {
          phone: this.phonenumber,
        },
        success(res) {
			console.log('徽章',res)
		_this.badgesNum=res.data.data.badgesNum
        },
      })
    },
    btnSharing(id) {
      let _this = this
      _this.disable = true
      _this.optionId = id
    },
    btnWear() {
      let _this = this
	  console.log(_this.optionId)
      uni.setStorageSync('optionId', _this.optionId)
     // uni.navigateBack()
      _this.disable = false
    },
    share() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneTimeline',
        type: 1,
        summary: '',
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err))
        },
      })
    },
  },

  created() {
    let self = this
    uni.getSystemInfo({
      success: function (e) {
        self.statusBarH = e.statusBarHeight + 10
        let screenWidth = e.screenWidth
        // 获取用户手机胶囊的位置信息
        let custom = uni.getMenuButtonBoundingClientRect()
        self.customHeight = custom.height //胶囊的高度
        self.customWidth = custom.width //胶囊的宽度
        self.customTop = custom.top //胶囊的顶部距离最顶部的距离
        self.customLeft = screenWidth - custom.right //胶囊距离左侧的距离
        self.customBarH = custom.height + custom.top + 10
        // 将高度值传给父页面
        self.$emit('getMarginTop', self.customBarH)
        self.contentH = custom.statusBarHeight - custom.top
      },
    })
  },
}
</script>

<style lang="scss" scoped>
.order {
  position: relative;
}
.collect {
  position: absolute;
  width: 680rpx;
  height: 1100rpx;
  background: #f8fafe;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  top: 230rpx;
  margin: 0 34rpx;
}
.collectNum {
  width: 680rpx;
  height: 200rpx;
  margin-top: -40rpx;
  background: linear-gradient(360deg, #f8fafe 10%, #b1ffd5 100%);
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  //   border-bottom: 1rpx solid #91a4b2;
}
.collectNum::after {
  content: '';
  width: 630rpx;
  height: 2rpx;
  position: absolute;
  bottom: -25rpx;
}
.bdLine {
  width: 630rpx;
  height: 1rpx;
  opacity: 0.1;
  border: 1rpx solid #91a4b2;
  margin-left: 30rpx;
}
.badge {
  padding-top: 31rpx;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  color: #303030;
}
.getBad {
  margin-top: 31rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #303030;
}
.num {
  font-size: 50rpx;
  color: #303030;
  font-weight: 700;
}
.border {
  width: 225rpx;
  height: 23rpx;
  margin-left: 230rpx;
  margin-top: -20rpx;
  background: #89ecd8;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  opacity: 1;
}

.awards {
  display: flex;
  justify-content: space-around;
  margin-top: 60rpx;
  .newcomer {
    width: 152rpx;
    height: 138rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.img-bc {
  width: 750rpx;
  height: 600rpx;
}
.header {
  width: 100vw;
  position: fixed;
}

.flexbox {
  height: 100%;
  text-align: center;
  .back-img {
    width: 750rpx;
    height: 1380rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .content {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;

    .back-home {
      // padding: 6rpx 16rpx;
      border: 2rpx solid #ccc;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .line {
        width: 2rpx;
        height: 30rpx;
        background-color: #ccc;
      }
    }
  }
}

.weared {
  width: 104rpx;
  height: 42rpx;
  background: #d1d1d1;
  border-radius: 25rpx 25rpx 25rpx 25rpx;
  opacity: 1;
  font-size: 24rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #303030;
  margin-left: 28rpx;
  margin-top: 18rpx;
}
.worn {
  width: 104rpx;
  height: 42rpx;
  background: linear-gradient(180deg, #6af6ab 0%, #3ef6e3 100%);
  border-radius: 25rpx 25rpx 25rpx 25rpx;
  opacity: 1;
  font-size: 24rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #303030;
  margin-left: 28rpx;
  margin-top: 18rpx;
}

.collTitle {
  font-size: 28rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #595959;
}
.eject {
  position: relative;
  width: 100%;
  height: 100%;
  width: 750rpx;
  height: 100vh;
  background: #040404;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  .imgbac {
    width: 100%;
    height: 100%;
  }
  .ejectTitle {
    position: absolute;
    font-size: 46rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    top: 250rpx;
    left: 260rpx;
  }
  .centImg {
    position: absolute;
    width: 300rpx;
    height: 300rpx;
    top: 340rpx;
    left: 230rpx;
  }
}
.leftWith {
  position: absolute;
  width: 128rpx;
  height: 2rpx;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
  top: 750rpx;
  left: 132rpx;
}
.with {
  position: absolute;
  font-size: 40rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  top: 720rpx;
  left: 295rpx;
}
.rightWith {
  position: absolute;
  width: 128rpx;
  height: 2rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
  top: 750rpx;
  left: 491rpx;
}
.illustrate {
  position: absolute;
  top: 835rpx;
  left: 89rpx;
  width: 570rpx;
  height: 149rpx;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 300;
  color: #e2e2e2;
  padding-top: 5rpx;
  .illTitle {
    text-align: center;
  }
  .illFinal {
    text-align: center;
  }
}

.wear {
  position: absolute;
  top: 1035rpx;
  left: 89rpx;
  width: 261rpx;
  height: 88rpx;
  box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
  border: 3rpx solid #88f79c;
}
.share {
  position: absolute;
  top: 1035rpx;
  left: 395rpx;
  width: 261rpx;
  height: 88rpx;
  background: #88f79c;
  box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
}
</style>
